<template>
    <a-modal
      :visible="true"
      title="批量添加"
      width="70%"
      @ok="handleOk"
      @cancel="reset"
    >
      <a-spin :spinning="spinning">
        <a-form
        :form="form"
        :labelCol="formItemLayout.labelCol"
        :wrapperCol="formItemLayout.wrapperCol"
      >
        <a-form-item
          label="品牌"
          :required="true"
        >
          <a-checkbox
            :indeterminate="indeterminate"
            :checked="checkAll"
            @change="onCheckAllChange"
          >
            全选
          </a-checkbox>
          <a-checkbox-group
            style="width: 100%;"
            @change="onChange"
            v-model="brand"
          >
            <a-row>
              <a-col
                :span="6"
                v-for="item,index in brandList"
                :key="index"
              >
                <a-checkbox :value="item.code">
                  {{item.name}}
                </a-checkbox>
              </a-col>

            </a-row>
          </a-checkbox-group>
        </a-form-item>
        <a-form-item
          label="小类"
          :required="true"
        >
          <a-checkbox
            :indeterminate="indeterminate1"
            :checked="checkAll1"
            @change="onCheckAllChange1"
          >
            全选
          </a-checkbox>
          <a-checkbox-group
            style="width: 100%;"
            v-model="xl"
            @change="onChange1"
          >
            <a-row>
              <a-col
                :span="6"
                v-for="item,index in xlList"
                :key="index"
              >
                <a-checkbox :value="item.code">
                  {{item.name}}
                </a-checkbox>
              </a-col>

            </a-row>
          </a-checkbox-group>

        </a-form-item>
        <a-form-item
          label="材质"
          :required="true"
        >
          <a-checkbox
            :indeterminate="indeterminate2"
            :checked="checkAll2"
            @change="onCheckAllChange2"
          >
            全选
          </a-checkbox>
          <a-checkbox-group
            style="width: 100%;"
            v-model="material"
            @change="onChange2"
          >
            <a-row>
              <a-col
                :span="6"
                v-for="item,index in materialList"
                :key="index"
              >
                <a-checkbox :value="item.code">
                  {{item.name}}
                </a-checkbox>
              </a-col>

            </a-row>
          </a-checkbox-group>

        </a-form-item>
        <a-form-item
          label="厚薄"
          :required="true"
        >
          <a-checkbox
            :indeterminate="indeterminate3"
            :checked="checkAll3"
            @change="onCheckAllChange3"
          >
            全选
          </a-checkbox>
          <a-checkbox-group
            style="width: 100%;"
            v-model="thick"
            @change="onChange3"
          >
            <a-row>
              <a-col
                :span="6"
                v-for="item,index in thickList"
                :key="index"
              >
                <a-checkbox :value="item.code">
                  {{item.name}}
                </a-checkbox>
              </a-col>

            </a-row>
          </a-checkbox-group>

        </a-form-item>
      </a-form>
      </a-spin>
    </a-modal>
</template>

<script>
import { getDictChildList, getDetail } from '@api/rd/index'
export default {
  components: {},

  props: {
    brandNum: {
      type: Number,
      default: null
    },
    item: {
      type: Object,
      default: null
    }
  },

  data() {
    return {
      brandList: [],
      indeterminate: true,
      checkAll: false,
      indeterminate1: true,
      indeterminate2: true,
      indeterminate3: true,
      checkAll1: false,
      checkAll2: false,
      checkAll3: false,
      spinning:false,
      form: this.$form.createForm(this),
      fileds: [],
      brands: [],
      xl: [],
      brand: [],
      xlList: [],
      material: [],
      materialList: [],
      thick: [],
      thickList: [],
      formItemLayout: {
        labelCol: {
          xl: { span: 5 }
        },
        wrapperCol: {
          xl: { span: 15 }
        }
      }
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    }
  },
  created() {
    this.spinning = true
    this.getBrandList()
    this.getXlList()
    this.getMList()
    this.getTList()
    const {item } = this.$props
    console.log(item);
    if (item) {
      this.formTile = '编辑'
      this.brand = item.brand.map(Number)
      this.xl = item.xl.map(Number)
      this.material = item.material.map(Number)
      this.thick = item.thick.map(Number)
    }
    setTimeout(()=>{
        this.spinning = false
    },2000)
  },
  methods: {
    reset() {
      this.$emit('closeBrand')
    },
    handleOk(e) {
      e.preventDefault()
      if (!this.xl.length) {
        this.$message.error('请选择小类！')
      } else if (!this.brand.length) {
        this.$message.error('请选择品牌！')
      } else {
        this.submit()
      }
    },
    submit() {
      if (this.brandNum || this.brandNum === 0) {
        const obj = {
          groupId: null,
          brand: this.brand,
          xl: this.xl,
          material: this.material,
          thick: this.thick
        }
        this.brands.push(obj)
        this.$emit('closeBrand',obj,this.brandNum)
      } else {
        const obj = {
          groupId: null,
          brand: this.brand,
          xl: this.xl,
          material: this.material,
          thick: this.thick
        }
        this.$emit('closeBrand',obj)
      }
    },
    onChange(checkedList) {
      this.indeterminate = !!checkedList.length && checkedList.length < this.brandList.length
      this.checkAll = checkedList.length === this.brandList.length
    },
    onCheckAllChange(e) {
      const arr = []
      this.brandList.map(item => {
        arr.push(item.id)
      })
      this.brand = e.target.checked ? arr : []
      this.indeterminate = false
      this.checkAll = e.target.checked
    },
    onChange1(checkedList) {
      this.indeterminate1 = !!checkedList.length && checkedList.length < this.xlList.length
      this.checkAll1 = checkedList.length === this.xlList.length
    },
    onCheckAllChange1(e) {
      const arr = []
      this.xlList.map(item => {
        arr.push(item.id)
      })
      this.xl = e.target.checked ? arr : []
      this.indeterminate1 = false
      this.checkAll1 = e.target.checked
    },
    onChange2(checkedList) {
      this.indeterminate2 = !!checkedList.length && checkedList.length < this.materialList.length
      this.checkAll2 = checkedList.length === this.materialList.length
    },
    onCheckAllChange2(e) {
      const arr = []
      this.materialList.map(item => {
        arr.push(item.id)
      })
      this.material = e.target.checked ? arr : []
      this.indeterminate2 = false
      this.checkAll2 = e.target.checked
    },
    onChange3(checkedList) {
      this.indeterminate3 = !!checkedList.length && checkedList.length < this.thickList.length
      this.checkAll3 = checkedList.length === this.thickList.length
    },
    onCheckAllChange3(e) {
      const arr = []
      this.thickList.map(item => {
        arr.push(item.id)
      })
      this.thick = e.target.checked ? arr : []
      this.indeterminate3 = false
      this.checkAll3 = e.target.checked
    },

    async getDetail() {
      const params = {
        id: this.id
      }
      try {
        const res = await getDetail('lib', params)
        if (res.code == 200) {
          const content = res.data
          this.$nextTick(() => {
            console.log(content);
            const craftStep = []
            content.craftStep.map(item => {
              const obj = {
                imgurl: [
                  {
                    name: 'pic.png',
                    uid: item.imgurl,
                    status: 'done',
                    url: item.imgurl
                  }
                ],
                description: item.description
              }
              craftStep.push(obj)
            })
            this.fileds = craftStep
            this.form1.setFieldsValue({ names: craftStep })
            this.brands = content.craftRelation
            this.partId = content.partId
            this.operId = content.operId
            this.form.setFieldsValue({ partId: content.partName, operId: content.operName })
          })
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取详情失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取部位列表失败！')
      }
    },
    async getBrandList() {
      const params = {
        name: 'BRAND'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.brandList = res.data
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('获取品牌列表失败！')
      }
    },

    async getXlList() {
      const params = {
        name: 'XL'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.xlList = res.data
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('获取小类列表失败！')
      }
    },
    async getMList() {
      const params = {
        name: 'GY_MATERIAL'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.materialList = res.data
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('获取小类列表失败！')
      }
    },
    async getTList() {
      const params = {
        name: 'GY_THICK'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.thickList = res.data
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('获取小类列表失败！')
      }
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.firstForm = values
          this.current += 1
        }
      })
      // this.current += 1
    },
  }
}
</script>